<template>
  <main class="main-container">
    <div class="topPart">
      <HeaderPart />
    </div>

    <div class="bottom">
      <div class="NavPart">1231</div>
      <div class="right" >
        <div class="content">
          <el-config-provider :locale="locale">

            <div class="mapDivClass" id="mapDiv" ref="mapDiv"></div>
            <div class="toolBar">
              <el-button type="primary" @click="createPolygon">create polygon</el-button>
              <el-button type="primary" @click="removeOverlay">clear</el-button>
            </div>
          </el-config-provider>
        </div>
      </div>
    </div>


    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
    >
      <span>This is a message</span>
      <el-input
        v-model="formObj.textarea2"
        :autosize="{ minRows: 2, maxRows: 4 }"
        type="textarea"
        placeholder="Please input"
      />
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
  </main>
</template>

<script setup lang="ts" >
/* eslint-disable */

import { ref, onMounted } from 'vue'
import {ElConfigProvider} from "element-plus";
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import HeaderPart from "@/components/Header.vue";

import mapFn1 from '@/mapFn/mapFn1'
import initMapPoint from '@/mapFn/initMapPoint'
const locale = zhCn

// @ts-ignore
const {T} = window


const dialogVisible = ref(false)




const mapDiv = ref('mapDiv')
let mapSelf: { centerAndZoom?: any; enableScrollWheelZoom?: any; clearOverLays?: any; addOverLay?: ((arg0: any) => void) | ((arg0: any) => void); }

onMounted(() => {
  // console.log('mapDiv onMounted', mapDiv, document.querySelector('#mapDiv'))

  // 初始化地图对象
  mapSelf = new T.Map('mapDiv')
  // 设置显示地图的中心点和级别
  mapSelf.centerAndZoom(new T.LngLat(116.40969, 39.9494), 12)
  // 允许鼠标双击放大地图
  mapSelf.enableScrollWheelZoom()

  // // todo mock data
  // const areaData = [
  //   [116.41136, 39.97569],
  //   [116.411794, 39.9068],
  //   [116.32969, 39.9294],
  //   [116.385438, 39.9061]
  // ]

  // //  初始化多边形
  // // todo mock data
  // const areaDataArr = [
  //   {
  //     id:'001',
  //     name:'名称A',
  //     site:'地址A',
  //     mapArea:[
  //       [116.41136, 39.97569],
  //       [116.411794, 39.9068],
  //       [116.32969, 39.9294],
  //       [116.385438, 39.9061]
  //     ]
  //   },
  //   {
  //     id:'002',
  //     name:'名称B',
  //     site:'地址B',
  //     mapArea:[
  //       [116.41136, 39.97569],
  //       [116.411794, 39.9068],
  //       [116.32969, 39.9294],
  //       [116.385438, 39.9061]
  //     ]
  //   }
  // ]

  // 初始化地图区域
  // mapFn1(mapSelf, areaData, '西湖区')
  mapFn1(mapSelf)

  // 初始化标点
  initMapPoint(mapSelf)


})

const config = {
  showLabel: true,
  color: 'blue',
  weight: 3,
  opacity: 0.5,
  fillColor: '#fff',
  fillOpacity: 0.2
}
let handler: any = null
// 清除覆盖物
function createPolygon() {
  if (handler) handler.close()
  handler = new T.PolygonTool(mapSelf, config)
  handler.open()

  handler.addEventListener('draw', (e: { currentLnglats: any }) => {
    console.log('顶点坐标列表 ----------> ', e.currentLnglats, JSON.stringify(e.currentLnglats))


  }) // 监听双击绘制完成事件，调用drawFinish方法
}

// 清除覆盖物
function removeOverlay() {
  mapSelf.clearOverLays()
}


</script>

<style scoped lang="stylus">

.main-container {
  background $second-background-color
  box-sizing border-box
  display flex
  flex-direction column
  justify-content space-between

  .topPart {
    position relative
    box-sizing border-box
    width 100%
    height $top-height
    min-height: $top-height;
  }

  .bottom {
    position relative
    box-sizing border-box
    display flex
    justify-content space-between
    overflow: hidden;
    //padding-top: 40px
    //min-height: calc(100vh - 120px);
    .NavPart{
      width:250px
    }

    .right {
      width 100%
      box-sizing border-box
      padding 10px

      .content {
        width 100%
        height 100%
        background $background-color
        border-radius 5px
        box-sizing border-box
        padding 10px

        .mapDivClass{
          height:500px
        }
      }
    }
  }
}



</style>
